/* 
  生产模式 
  js 压缩 babel  
  sass 转换为css 并且添加前缀
  html 压缩
  img 压缩
  zip 打包
  product


  开发模式
    服务器 browsersync
    sass 转换 map
    
  第一步：npm init
  第二步：
gulp gulp-sass gulp-uglify gulp-htmlmin gulp-zip gulp-imagemin gulp-sourcemaps browser-sync gulp-autoprefixer
npm install --save-dev gulp-babel @babel/core @babel/preset-env
  第三步：gulp dev:server
*/
var config = require('./config')
var gulp = require('gulp')
var sass = require('gulp-sass')
var babel = require('gulp-babel')
var uglify = require('gulp-uglify')
var htmlmin = require('gulp-htmlmin')
var zip = require('gulp-zip')
var imagemin = require('gulp-imagemin')
var sourcemaps = require('gulp-sourcemaps')
var browserSync = require('browser-sync').create()
var reload = browserSync.reload
var autoprefixer = require('gulp-autoprefixer')

gulp.task('dev:server', ['dev:sass'], function () {
  browserSync.init({
    server: {
      baseDir: './app'
    }
  })

  gulp.watch(config.html.entry).on('change', reload)
  gulp.watch(config.js.entry).on('change', reload)
  gulp.watch(config.sass.entry, ['dev:sass'])

})

gulp.task('dev:sass', function () {
  return gulp.src(config.css.entry)
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(config.css.output))
    .pipe(reload({stream:true}))
})



gulp.task('pro:js', function () {
  return gulp.src(config.js.entry)
    .pipe(babel({
      presets: ['@babel/env']
    })) // 得到ES5 + JS
    .pipe(uglify())
    .pipe(gulp.dest(config.js.output))
})

gulp.task('pro:sass', function () {
  return gulp.src(config.sass.entry)
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(autoprefixer({
      browsers: ["> 0%"]
    }))
    .pipe(gulp.dest(config.sass.output))
})

gulp.task('pro:html', function () {
  return gulp.src(config.html.entry)
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(config.html.output))
})

gulp.task('pro:img', function () {
  return gulp.src(config.img.entry)
      .pipe(imagemin())
      .pipe(gulp.dest(config.img.output));
});

gulp.task('pro:zip', ['pro:html', 'pro:js', 'pro:sass', 'pro:img'], function () {
  return gulp.src(config.zip.entry)
      .pipe(zip('product.zip'))
      .pipe(gulp.dest(config.zip.output))
})


gulp.task('product', ['pro:zip'])
